<template>
	<view class="login-box">
		<view class="login-title">
			欢迎使用XXX
		</view>
		
		<view class="lo-form">
			<view class="lo-form-item">
				<view class="select-width" @click="onSelectShow">
					<view class="label-seled">
						<text class="u-line-1">+{{mobileType}}</text>
						<u-icon name="arrow-down-fill" :size="18"></u-icon>
					</view>
					<u-select v-model="show" 
						:default-value="[0]"
						:list="list" 
						@confirm="onMobileTypeConfirm"></u-select>
				</view>
				<view class="lo-input">
					<u-input v-model="mobile" 
						class="cu-input"
						type="number" 
						placeholder="手机号"/>
				</view>
			</view>
			<view class="lo-form-item">
				<view class="lo-input">
					<u-input v-model="code" 
						class="cu-input"
						type="number" 
						placeholder="验证码"/>
				</view>
				<view class="lo-verification" 
					v-if="codeIf"
					@click="handleVerificationCode">
					获取验证码
				</view>
				<view class="lo-verification lo-color" v-else>
					重新发送 <text>( {{time}}s )</text>
				</view>
			</view>
			
			<u-button type="primary" 
				shape="circle" 
				:ripple="true" 
				@click="handleLoginClick">
				登录
			</u-button>
			
			<view class="lo-agreement">
				<u-checkbox v-model="checked"></u-checkbox>
				<view class="lo-agreement-text">
					我已阅读并同意 <text>《XXX协议》</text> <text>《某某协议》</text> 以及<text>《什么条款》</text>
				</view>
			</view>
		</view>
		
		<!--通过config.js配置文件里的第三方登录属性，判断当前是否需要显示其他登录-->
		<view v-if="comConfigLogin !== false">
			<view class="other-title">
				其他登录方式
			</view>
			<view class="other-login">
				<block v-for="(item, index) in comConfigLogin" :key="index">
					<view class="login-icon" @click="handleWxLogin" v-if="item == 'wechat'">
						<u-icon name="weixin-circle-fill" :size="100" color="#06C15F"></u-icon>
					</view>
					<view class="login-icon" @click="handleWxLogin" v-if="item == 'weibo'">
						<u-icon name="weibo" :size="100" color="#fa3534"></u-icon>
					</view>
				</block>
			</view>
		</view>
		<tfgg-verify ref="verifyElement" @result="verifyResult" v-if="comConfigVerify"/>
	</view>
</template>

<script>
/**
 * @param { Boolean } show        //选择器的显示隐藏状态
 * @param { Array } list          //手机号码地区
 * @param { String } mobileType   //手机号码地区的显示
 * @param { String } mobile       //输入的手机号
 * @param { Boolean } checked     //同意合法权益
 * @param { Number } time         //重新发送的倒计时
 * @param { Boolean } codeIf      //获取验证码和重新发送的切换 
 * @param { String } code         //输入的验证码 
 * */
import { loginAppOtherAction } from '@/common/login/uni_login';
export default {
	data() {
		return {
			show: false,
			list: [
				{
					value: '1',
					label: '86'
				},
				{
					value: '2',
					label: '1111'
				}
			],
			mobileType: '86',
			mobile: '',
			checked: false,
			time: 60,
			codeIf: true,
			code: '',
			message: ''
		};
	},
	computed: {
		//当前是否需要滑动验证功能
		comConfigVerify(){
			return this.$config.VertifyBeforeSendCode
		},
		
		//当前是否有第三方登录
		comConfigLogin(){
			if(this.$config.ThirdAuth.length === 0){
				return false
			}
			return this.$config.ThirdAuth;
		}
	},
	methods: {
		onSelectShow(){
			this.show = true;
		},
		
		/**选中号码类型*/
		onMobileTypeConfirm(e){
			this.mobileType = e[0].label;
		},
		
		/**手机验证码登录*/
		handleLoginClick(){
			let title = '';
			if(!this.$u.test.mobile(this.mobile)){
				title = '手机号不正确。';
			}else if(!this.$u.test.code(this.code, 6)){
				title = '验证码不正确。';
			}else if(this.checked == false){
				title = '还未同意使用条款。'
			}
			if(title != ''){
				uni.showToast({
					title,
					icon: 'none'
				})
				return
			}
		},
		
		/**微信登录*/
		async	handleWxLogin(){
			try{
				const message = await loginAppOtherAction();
				// const data = await this.$u.api.getweChartLogin({ 
				// 	code: message.code,  
				// 	wechatLoginType: "wechat",
				// });
				// uni.showToast({
				// 	title: data.code,
				// 	icon: 'none'
				// })
			}catch(e){
				uni.showToast({
					title: e,
					icon:'error'
				})
			}
		},
		
		/**获取验证码*/
		handleVerificationCode(){
			if(!this.$u.test.mobile(this.mobile)){
				uni.showToast({
					title: '手机号不正确。',
					icon: 'none'
				})
				return
			}
			if(this.comConfigVerify){
				//开启滑块校验
				this.$refs.verifyElement.show();
			}else{
				this.codeIf = false;
				this.timeFn();
			}
		},
		
		 /* 校验结果回调函数 */
		verifyResult(res){
			if(res){
				this.$refs.verifyElement.reset();//校验重置插件
				this.codeIf = false;
				this.timeFn();
				return
			}
			uni.showToast({
				title: '验证失败！',
				icon: 'error',
				success: () => {
					this.$refs.verifyElement.reset();//校验重置插件
				}
			})
		},
		
		/**倒计时*/
		timeFn(){
			if(this.time == 0){
				this.codeIf = true;
				this.time = 60;
			}else{
				this.time--;
				setTimeout(() => {
				 this.timeFn()
				},1000)
			}
		}
		
	}
};
</script>

<style scoped lang="scss">
	.login-box{
		padding: 0 60rpx;
		.login-title{
			color: #000;
			font-weight: bold;
			font-size: 48rpx;
			margin: 100rpx 0;
		}
		.other-title{
			color: #AAAAAA;
			font-size: 24rpx;
			text-align: center;
			margin-top: 120rpx;
			letter-spacing: 4rpx;
			margin-bottom: 80rpx;
		}
		.other-login{
			display: flex;
			justify-content: center;
			.login-icon{
				margin: 0 10rpx;
			}
		}
		.lo-form{
			margin: 20rpx 0;
			.lo-form-item{
				margin-bottom: 40rpx;
				height: 88rpx;
				display: flex;
				border-radius: 50rpx;
				background-color: #F3F4F6;
				.select-width{
					display: flex;
					justify-content: center;
					align-items: center;
					margin-left: 20rpx;
					.label-seled{
						display: flex;
						align-items: center;
						color: #000;
						font-size: 30rpx;
						text{
							text-align: center;
							width: 100rpx;
						}
					}
				}
				.lo-input{
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					margin-left: 30rpx;
					margin-right: 20rpx;
					.cu-input{
						width: 100%;
					}
				}
				.lo-verification{
					color: #2979FF;
					font-size: 24rpx;
					white-space:nowrap;
					display: flex;
					align-items: center;
					padding-right: 40rpx;
					padding-left: 20rpx;
					&:active {
						color: rgba($color: #2979FF, $alpha: 0.7);
					}
				}
				.lo-color{
					color: #909399;
					text {
						padding-left: 10rpx;
					}
				}
			}
			.lo-agreement{
				margin-top: 38rpx;
				display: flex;
				.lo-agreement-text{
					color: #909399;
					font-size: 24rpx;
					line-height: 40rpx;
					margin-left: -10rpx;
					text{
						color: #2979FF;
					}
				}
			}
		}
		::v-deep .u-size-default{
			height: 88rpx !important;
			line-height: 88rpx !important;
		}
	}
</style>
